<!--
 * @Author: wangshuguang
 * @Date: 2022-03-28 17:55:50
 * @LastEditTime: 2022-08-23 16:57:10
 * @LastEditors: wangshuguang
 * @Description: 收入记录详情
-->
<template>
  <div>
    <!-- 顶部内容 -->
    <div class="head">
      实收￥{{ dataForm['realAmt'] }}
      <!-- 退款按钮展示条件： 会员详情页面 & 支付状态不是【待支付】 & 业务类型为【商城，预定】 && 可退款有值 -->
      <el-button v-show="[5,7, 6,14,15,17].includes(dataForm.type) && [100,205].includes(dataForm.paymentStatus)" type="danger" size="small" :disabled="!dataForm['canRefAmt']" round @click="showRefundModal">退款</el-button>
    </div>
    <!-- 退款记录 -->
    <div class="formBox refundList">
      <div class="formLabel">退款记录：</div>
      <div class="formValue">
        <div v-if="refundList.length" class="listContent">
          <div v-for="item of refundList" :key="item.id">
            <span>{{ item.refundStatus }}</span>
            <span>-￥{{ item.refundFee }}</span>
            <span>{{ item.createTime }}</span>
            <el-button type="text" @click="showRefundDetail(item)">详情</el-button>
          </div>
        </div>
        <div v-else>
          无
        </div>
      </div>
    </div>
    <!-- 订单详情 -->
    <el-row>
      <el-col :span="12" class="leftDetail">
        <div v-for="item of leftDetail" :key="item.key" class="formBox">
          <div class="formLabel">{{ item.label }}：</div>
          <div class="formValue">{{ dataForm[item.key] }}</div>
        </div>
      </el-col>
      <el-col :span="12">

        <div class="rightTopDetail">
          <div class="formBox ">
            <div class="formLabel">订单金额：</div>
            <div class="formValue">￥{{ dataForm['totalFee'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">业务优惠：</div>
            <div class="formValue">
              <div>-￥{{ dataForm['discountFee'] }}</div>
              <div>{{ dataForm['discountInfo'] }}</div>
            </div>
          </div>
        </div>
        <div class="rightBottomDetail">
          <div class="formBox ">
            <div class="formLabel">交易手续费：</div>
            <div class="formValue">￥{{ dataForm['feeAmt'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">插件抽佣：</div>
            <div class="formValue">￥{{ dataForm['pluginAmt'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">备注：</div>
            <div class="formValue">{{ dataForm['remark'] }}</div>
          </div>
          <div class="formBox ">
            <div class="formLabel">实收：</div>
            <div class="formValue">￥{{ dataForm['realAmt'] }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 退款弹框 -->
    <RefundDialog v-model="refundVisible" :info-config="infoConfig" @sucClose="$emit('sucClose')" />
    <!-- 详情弹框 -->
    <el-dialog
      title="退款订单详情"
      append-to-body
      :visible.sync="refundDetailVisible"
      width="70%"
    >
      <RefundHisDetail v-if="refundDetailVisible" :info-config="refundConfig" />
    </el-dialog>
  </div>
</template>

<script>
import {
  qryRefundListByOrderNo,
  qryRefundRecord
} from '@/api/payCenter'
import RefundHisDetail from './RefundHisDetail.vue'
import RefundDialog from '../components/RefundDialog.vue'
export default {
  components: { RefundHisDetail, RefundDialog },
  props: {
    infoConfig: {}
  },
  data() {
    return {
      refundConfig: {},
      refundDetailVisible: false,
      refundVisible: false,
      refundList: [],
      dataForm: {},
      leftDetail: [
        { label: '支付单号', key: 'paymentNo' },
        { label: '第三方支付单号', key: 'thirdOrderNo' },
        { label: '业务单号', key: 'orderNo' },
        { label: '商品名称', key: 'title' },
        { label: '发起支付时间', key: 'paymentTime' },
        // { label: '退款门店', key: 'num' },
        { label: '支付业务', key: 'typeZh' },
        { label: '业务来源', key: 'sourceZh' },
        { label: '支付门店', key: 'shopName' },
        { label: '使用插件', key: 'pluginCodeZh' }
      ]
    }
  },
  mounted() {
    console.log('infoConfig', this.infoConfig)
    this.dataForm = {
      ...this.infoConfig
    }
    qryRefundListByOrderNo(this.dataForm.orderNo).then(res => {
      console.log('res', res)
      this.refundList = res.data
    })
  },
  methods: {
    showRefundDetail(refundOrder) {
      qryRefundRecord({
        refundNo: refundOrder.refundNo
      }).then(res => {
        console.log('res', res)
        const list = res.data.pageList.list
        this.refundConfig = list.length ? list[0] : {}
        this.refundDetailVisible = true
      })
    },
    showRefundModal() {
      this.refundVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.head{
  font-size: 25px;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.refundList{
  padding: 20px 0;
  border: 1px solid #ddd;
  border-right: none;
  border-left: none;
  margin: 20px 0;
  .listContent{
    >div{
      span{
        margin-right: 10px;
      }
    }
  }
}
.rightTopDetail{
  border-bottom: 1px solid #ddd;
}
.leftDetail{
  border-right: 1px solid #ddd;
}
.formBox{
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  .formLabel{
    width: 150px;
    text-align: right;
    font-weight: bold;
  }
  .formValue{
    flex: 1;
    text-align: right;
    padding-right: 20px;
  }
}
</style>
